<template>
  <div class="app-frame__container">
    <div class="cp">
      <table class="cp__table">
        <colgroup width="1%"></colgroup>
        <colgroup width="100%"></colgroup>
        <tbody>
        <tr>
          <td class="cp__label">项目名称</td>
          <td>
            <div class="tbc-input__container">
            <input type="text" @blur="blurFn('name', data.name)" v-model="data.name" placeholder="请输入项目名称" class="tbc-input__box">
            <!--<div class="tbc-input__error" v-show="errorsobj.has('email')">{{ errorsobj.first('email') }}</div>-->
        </div>
          </td>
        </tr>
        <tr>
          <td class="cp__label">项目说明</td>
          <td>
            <ueditor ref="ueditor"></ueditor>
          </td>
        </tr>
        <tr>
          <td class="cp__label">任务名称</td>
          <td>
            <div class="tbc-input__container">
            <input type="text" placeholder="请输入邮箱" class="tbc-input__box" v-model="data.projectTasksUpdateReq.name">
            </div>
          </td>
        </tr>
        <tr>
          <td class="cp__label">起止时间</td>
          <td>
            <date :foo.sync="time"></date>
          </td>
        </tr>
        <tr>
          <td class="cp__label">管理员</td>
          <td>
            <div class="cp__admin" v-for="(item, index) in adminData" v-if="item.isChecked!==0">{{item.name}}</div>
            <button @click="addMoreFn" class="tbc-btn tbc-btn--gray">添加更多</button>
            <modal :visible.sync="addMoreIsShow" :options="{cancelable: true}" @confirm="addMoreHandler" @cancel="cancelAddAdmin">
              <span slot="title">添加管理员</span>
              <div>
                <el-transfer :props="{ key: 'id', label: 'name' }" v-model="adminChecked" :data="adminData" :titles="['备选人员', '已选人员']"></el-transfer>
              </div>
            </modal>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="cp__submit">
        <button @click="submit" class="tbc-btn tbc-btn--blue">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import './css/createProject.scss'
import ueditor from 'components/common/ueditor'
import modal from 'components/modal'
import projectDao from 'dao/project'
import date from './src/task/date.vue'
export default {
  components: {
    ueditor,
    modal,
    date
  },
  data () {
    return {
      data: {
        description: '',
        language: 'cn',
        name: '',
        projectTasksUpdateReq: {
          customerIdsStr: '',
          endDateStr: '',
          goodsId: 1,
          name: '',
          startDateStr: ''
        }
      },
      time: {
        startTime: '2017-07-02 18:23:00',
        endTime: '2017-07-30 16:24:00'
      },
      addMoreIsShow: false,
      adminData: [],
      adminChecked: [],
      adminTemporary: []
    }
  },
  mounted () {
    this.getAdmins()
  },
  methods: {
    getAdmins () {
      projectDao.getAdmins().then(r => {
        r.response.admin = [{
          isChecked: 0,
          id: '1',
          name: '我是1'
        }, {
          isChecked: 1,
          id: '2',
          name: '我是2'
        }, {
          isChecked: 0,
          id: '3',
          name: '我是3sdaasd'
        }, {
          isChecked: 1,
          id: '4',
          name: '我是4'
        }]
        this.adminData = r.response.admin
        for (const elem of this.adminData.values()) {
          if (elem.isChecked === 1) {
            this.adminChecked.push(elem.id)
          }
        }
      }).catch()
    },
    submit () {
      this.data.projectTasksUpdateReq.startDateStr = this.time.startTime
      this.data.projectTasksUpdateReq.endDateStr = this.time.endTime
      this.data.description = this.$refs.ueditor.getContent()
      // this.data.projectTasksUpdateReq.customerIdsStr = this.adminChecked.toString()
      console.log(this.data)
      projectDao.create(this.data).then(r => {
        if (r.code === 0) {
          alert('保存成功')
        }
      }).catch()
    },
    addMoreFn () {
      this.addMoreIsShow = true
      this.adminTemporary = this.adminChecked
    },
    addMoreHandler () {
      for (const elem of this.adminData.values()) {
        if (this.adminChecked.indexOf(elem.id) !== -1) {
          elem.isChecked = 1
        } else {
          elem.isChecked = 0
        }
      }
      this.addMoreIsShow = false
    },
    blurFn () {
    },
    cancelAddAdmin () {
      this.adminChecked = this.adminTemporary
    }
  }
}
</script>
